<template>
    <div>
<div class="home-top">
    <div><i class="el-icon-document" style="color:#1797DB"></i><p class="home-right"><span>总订单</span><span>{{totalOrder}}</span></p></div>
    <div><i class="el-icon-coin" style="color:#D4237A"></i><p class="home-right"><span>总销售</span><span>{{totalAmount}}</span></p></div>
    <div><i class="el-icon-s-order" style="color:#1797DB"></i><p class="home-right"><span>今日订单数</span><span>{{todayOrder}}</span></p></div>
    <div><i class="el-icon-coffee" style="color:#36FA44"></i> <p class="home-right"><span>今日销售额</span><span>{{totayAmount}}</span></p></div>
</div>
<div id="home-chart">图表
</div>
    </div>
</template>

<script>
import {totalData} from "@/apis/users"
import * as echarts from 'echarts'
    export default {
        data(){
            return{
                totalOrder:'',  //总的订单
                totalAmount:'',  //总的销售
                todayOrder:'',   //今日订单数
                totayAmount:''    //今日销售额
              }
        },
    mounted(){
        //获取数据
        totalData().then(res=>{
            // console.log(res);
            this.totalOrder=res.data.totalOrder
            this.totalAmount=res.data.totalAmount
            this.todayOrder=res.data.todayOrder
            this.totayAmount=res.data.totayAmount
                let  myChart = echarts.init(document.getElementById('home-chart'))
        myChart.setOption( {title: {
        text: '数据统计'},
      tooltip: {
        trigger: 'axis'
       },
    legend: {
        data: ['订单', '销售额',]
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: res.data.xData
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '订单',
            type: 'line',
            stack: '总量',
            data: res.data.orderData
        },
        {
            name: '销售额',
            type: 'line',
            stack: '总量',
            data: res.data.amountData
        },
       
    ]})
    }
        )    
    }}

</script>

<style lang="less" scoped>
.home-top{
    // background-color: #f0f2f5;
    justify-content: space-between;
    display: flex;
    div{
        display: flex;
        justify-content: space-around;
        // justify-content: center;
        align-items: center;
        width: 300px;
      margin-right: 20px;
        background: #fff;
        border: 2px solid  #f0f2f5 ;
    }
    i{font-size: 80px;}
}
.home-right{
    
    display: flex;
    flex-direction: column;
    span{
        font-size: 16px;
    };
}
#home-chart{
    margin-top: 40px;
    width: 100%;
    height: 400px;
     border: 2px solid  #f0f2f5; 

}
</style>